<!-- 
  使用方法：
  ndColumns: 列数 组件根据传入的列数自动计算每列的宽度
  data: 数据源
  columns: 列配置
 -->
<template>
  <div class="w-full grid-content" :style="contentStyle">
    <slot></slot>
  </div>
</template>
<script setup>
// import { useDictStore } from '@/store';
import { isUndefined, isNull } from 'lodash-es'
import { useAttrs } from 'vue';
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  },
  size: {
    type: String,
    default: 'default'
  },
  ndColumns: {
    type: Number,
    default: 3
  },
  labelWidth: {
    type: Number,
    default: 150
  }
})

const contentStyle = computed(() => {
  return {
    gridTemplateColumns: `repeat(${props.ndColumns}, 1fr)`
  }
})
provide('label-width',props.labelWidth)
</script>
<style lang="scss" scoped>
.grid-content {
  display: grid;
  // grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  border-bottom: 1px solid rgb(235, 238, 245);
  // border-bottom: none;
  border-left: 1px solid rgb(235, 238, 245);
  :deep(.grid-item) {
    font-size: 14px;
    display: flex;
    border-right: none;
    border-top: none;
    border-left: none;
    min-height: 56px;
    line-height: 23px;
    &.empty {
      .label {
        background-color: #fff;
        border-left: none;
        border-right: none;
      }
      .content {
        border-left: none;
      }
    }
    .label {
      height: 100%;
      display: flex;
      align-items: center;
      background: rgb(245, 247, 250);
      padding: 8px 11px;
      color: rgb(96, 98, 102);
      border-top: 1px solid rgb(235, 238, 245);
      &.empty{
        border-right: none;
        background: transparent;
      }
    }
    .content {
      flex: 1;
      padding: 8px 11px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #333;
      border: 1px solid rgb(235, 238, 245);
      border-bottom: none;
      &.no-border-right{
        border-right: none;
        // border-right: none;
      }
      &.empty{
        border-left: none;
      }
    }
    .el-form-item {
      margin-bottom: 0;
      position: relative;
      top: 0;
    }
    .el-form-item:has(.el-form-item__error) {
      margin-bottom: 0;
      position: relative;
      top: -6px;
    }
  }
}
</style>
